<template>
	<view class="page">
		<!-- 状态 -->
		<view class="order-state">
			<view class="inner">
				<view class="icon">
					<image src="https://img.2024csnl.com/static/2.x/a83.png" mode=""></image>
				</view>
				<view class="exp">
					<view class="state">
						<text>{{ getStatusType(details.status) }}</text>
					</view>
					<view class="label">
						<text>{{ codtxt }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 自提 -->
		<view
			v-if="JSON.stringify(storeinfo) != '{}'&& storeinfo.length!=0"
			class="order-address">
			<view
				class="inner"
				@click="openMap(storeinfo.longitude,storeinfo.latitude,storeinfo.name)">
				<view class="icon">
					<image src="https://img.2024csnl.com/static/2.x/a41.png" mode=""></image>
				</view>
				<view class="exp">
					<view class="name">
						<text>{{ storeinfo.name }}</text>
					</view>
					<view class="address">
						<text>{{ storeinfo.address }} </text>
					</view>
				</view>
			</view>
		</view>
		
		<view
			class="order-card"
			v-else>
			<view class="title">
				<view class="icon">
					<image src="https://img.2024csnl.com/static/2.x/a41.png" mode=""></image>
				</view>
				<view class="exp">
					<text>{{details.area}}{{details.address}}</text>
				</view>
			</view>
			<view class="tel">
				<text>{{details.linkman}}</text>
				<text>{{details.tel}}</text>
			</view>
		</view>
		
		
		<!-- 订单 -->
		<view>
			<view class="order-goods">
				<view class="thead">
					<image :src="details.binfo.logo" mode=""></image>
					<text>{{ details.binfo.name }}</text>
				</view>
				<view class="tbody">
					<view
						class="item"
						v-for="(item,i) in prolist"
						:key="i">
						<view class="cover">
							<image :src="item.pic"></image>
						</view>
						<view class="exp">
							<view class="title">{{item.name}}</view>
							<view class="desc">规格：{{item.ggname}}</view>
							<view class="">
								<!-- <view>x{{item.num}}</view> -->
								<view class="price">
									<text>￥{{item.sell_price}}</text>
								</view>
							</view>
						</view>
						
						<!-- <view
							class="btn"
							v-if="item.iscomment==0&&item.status==3&comment==1"
							@click="onSkip(`/package/mine/evaluate/evaluate?id=${item.id}&orderType=${orderType}`)">
							<view>去评价</view>
						</view>
						<view
							class="btn"
							v-if="(item.status==2 || item.status==3) && details.freight_type==0&&ordertypeOne==0||ordertypeOne==1||ordertypeOne==2">
							<view
								@click="onSkip(`/package/mine/myOrderList/logistics?com=${details.express_com}&no=${details.express_no}&type=null`)">
								查看物流</view>
						</view> -->
					</view>
				</view>
				<view class="tfoot">
					<view class="row">
						<view class="label">
							<text>商品数量</text>
						</view>
						<view class="value">
							<text>{{ prolist.length }}</text>
						</view>
					</view>
					<view class="row">
						<view class="label">
							<text>支付方式</text>
						</view>
						<view class="value">
							<text>{{ '微信支付' }}</text>
						</view>
					</view>
					<view class="row">
						<view class="label">
							<text>商品总价</text>
						</view>
						<view class="value">
							<text>￥{{details.totalprice}}</text>
						</view>
					</view>
					<view class="row">
						<view class="label">
							<text>运费</text>
						</view>
						<view class="value">
							<text>￥{{details.freight_price}}</text>
						</view>
					</view>
					<view class="row">
						<view class="label">
							<text>支付金额</text>
						</view>
						<view class="value">
							<text>￥{{details.freight_price}}</text>
						</view>
					</view>
					<view class="row">
						<view class="label">
							<text>订单备注</text>
						</view>
						<view class="value">
							<text>{{ remark }}</text>
						</view>
					</view>
					<!-- <view
						class="row"
						vif="details.freight_type==1"
						@click="onOpen(details.hexiao_qr)">
						<view class="label">
							<text>核销码</text>
						</view>
						<view class="value">
							<image class="QRCode" :src="details.hexiao_qr"></image>
						</view>
					</view> -->
				</view>
			</view>
			
			<view class="order-detail">
				<view class="thead">
					<text>订单信息</text>
				</view>
				<view class="tbody">
					<view
						class="item"
						@click="copyText(details.ordernum)">
						<view class="label">订单编号</view>
						<view class="value">
							<text>{{ details.ordernum }}</text>
							<image src="https://img.2024csnl.com/static/2.x/a85.png" mode=""></image>
							<text style="font-size: 30rpx; color: #866EFF;">复制</text>
						</view>
					</view>
					<view class="item">
						<view class="label">创建时间</view>
						<view class="value">{{ details.createtime }}</view>
					</view>
					<view class="item" v-if="details.paytime">
						<view class="label">付款时间</view>
						<view class="value">{{ details.paytime }}</view>
					</view>
					<view class="item" v-if="details.send_time">
						<view class="label">发货时间</view>
						<view class="value">{{ details.send_time }}</view>
					</view>
					<view class="item" v-if="details.collect_time">
						<view class="label">收货时间</view>
						<view class="value">{{ details.collect_time }}</view>
					</view>
					
				</view>
			</view>
			
			<view class="order-bar">
				<view class="inner">
					<view class="bar">
						<view class="label">
							<text>待支付</text>
							<text style="color: #E86A33;">￥{{ details.totalprice }}</text>
						</view>
						<view class="bton">
							<text>立即支付</text>
						</view>
					</view>
					<!-- <view class="bar">
						<view class="bton">
							<text>确认收货</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		myOrderDetails
	} from "../../../api/index.js"
	export default {
		data() {
			return {
				comment: null, //评论状态
				remark: '',
				details: {},
				prolist: [],
				orderType: null,
				storeinfo: {}
			}
		},
		onLoad(opt) {
			this.showBtn = opt.showBtn
			this.orderType = opt.ordertype
			this.getMyOrderDetails(opt.orderId, opt.ordertype)
		},
		methods: {
			onOpen(img) {
				uni.previewImage({
					urls: [img],
					current: 0,
				})
			},
			openMap(lon, lat, name) {
				// console.log("获取经纬度ssssfff", lon, lat);
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 15,
					name: name
				})
			},
			getStatusType(status) {
				return status == 0 ? '待支付' : status == 1 ? '已成功付款' : status == 2 ? '订单已发货' : status == 3 ? '已完成' :
					status ==
					4 ? '订单已取消' : ''
			},
			async getMyOrderDetails(id, ordertype) {
				const res = await myOrderDetails('s=/ApiOrder/details', {
					id: id,
					ordertype: ordertype
				})
				const {
					status,
					data,
					msg
				} = res.data
				if (status == 1) {
					this.remark = data.detail.remark == null ? '暂无备注' : data.detail.remark
					this.codtxt = data.codtxt
					this.details = data.detail
					this.storeinfo = data.storeinfo
					this.prolist = data.prolist
					this.comment = data.shopset.comment
					this.ordertypeOne = data.ordertype
				} else {
					this.showToast(msg)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.QRCode {
		width: 350rpx;
		height: 350rpx;
		margin-top: 30rpx;
	}

	.busAddressTit {
		line-height: 70rpx;
		font-weight: bold;
	}

	.order-address {
		margin: 20rpx 0;
		background: #FFF;
		border-radius: 20rpx;
		padding: 18rpx 20rpx;
		padding-bottom: 4rpx;

		.address-info {
			font-size: 29rpx;
			width: 580rpx;
		}

		.info {
			color: #999999;
			font-size: 27rpx;
			margin: 20rpx 0;
		}

		.order-add {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
		}

		.add-address {
			color: #41644A;
			line-height: 160rpx;
			text-align: center;
		}
	}

	page .orderDetails {
		background: #F7F7F7;
		padding: 30rpx;
	}

	.btn {
		padding: 24upx 0 30upx;
		display: flex;
		justify-content: flex-end;
		margin-right: 30rpx;

		>view {
			color: #FFFFFF;
			width: 152upx;
			height: 52upx;
			border-radius: 26upx;
			background: #F41717;
			line-height: 52upx;
			text-align: center;
			margin-left: 24upx;
			font-size: 26upx;
		}
	}

	.telBox {
		color: #B3B3B3;
		margin: 30rpx 0;
	}

	.card {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 30rpx;


		.oneGoods {
			color: #B3B3B3;
			display: grid;
			grid-template-columns: 20% 80%;
			grid-gap: 0 30rpx;
			margin-bottom: 30rpx;

			.title {
				color: #333333;
			}

			.price {
				padding-right: 30rpx;
				color: #F41717;

				text {
					font-size: 36rpx;
				}
			}

			image {
				background: #F5F5F5;
				width: 128rpx;
				height: 131rpx;
				border-radius: 15rpx;
			}
		}

		.oneLine {
			margin: 35rpx 0;

		}
	}
	
	.page {
		min-height: 100vh;
		background: #f8f8f8;
	}
	
	.order-state {
		position: relative;
		background: url('https://img.2024csnl.com/static/2.x/a82.png') center center no-repeat;
		background-size: 100% 100%;
		padding: 20rpx;
		height: 160rpx;
		.inner {
			position: relative;
			display: flex;
			align-items: center;
		}
		.icon {
			image {
				display: block;
				width: 100rpx;
				height: 100rpx;
			}
		}
		.exp {
			display: flex;
			align-items: center;
			.state {
				line-height: 100rpx;
				margin: 0 20rpx 0 10rpx;
				font-size: 40rpx;
				color: #fff;
				font-weight: bold;
			}
			.label {
				line-height: 100rpx;
				font-size: 32rpx;
				color: #fff;
				opacity: 0.6;
			}
		}
	}
	
	.order-address {
		position: relative;
		background: url('https://img.2024csnl.com/static/2.x/a86.png') center bottom repeat-x #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 40rpx 20rpx;
		.inner {
			display: flex;
			.icon {
				padding: 0 20rpx;
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.exp {
				flex: 1;
				margin: 0 0 0 0;
				.name {
					line-height: 40rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
				.address {
					margin-top: 20rpx;
					line-height: 40rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.order-card {
		position: relative;
		background: url('https://img.2024csnl.com/static/2.x/a86.png') center bottom repeat-x #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 40rpx 20rpx;
		.title {
			display: flex;
			align-items: center;
			.icon {
				padding: 0 20rpx;
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.exp {
				flex: 1;
				margin: 0 0 0 0;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.tel {
			margin: 20rpx 0 0 80rpx;
			font-size: 30rpx;
			text {
				&:nth-child(2) {
					color: #999;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.order-goods {
		margin: 20rpx 0;
		padding: 20rpx;
		border-radius: 20rpx;
		position: relative;
		background: #fff;
		.thead {
			margin: 0 20rpx;
			border-bottom: 1px solid #eee;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			image {
				display: block;
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
			text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.tbody {
			.item {
				margin: 20rpx;
				display: flex;
				align-items: center;
				.cover {
					image {
						display: block;
						width: 180rpx;
						height: 180rpx;
						background: #eee;
						border-radius: 10rpx;
					}
				}
				.exp {
					flex: 1;
					margin: 0 0 0 20rpx;
				}
				.title {
					line-height: 40rpx;
					font-size: 30rpx;
					color: #000;
				}
				.desc {
					margin: 20rpx 0 20rpx;
					color: #999;
				}
				.price {
					line-height: 50rpx;
					font-size: 40rpx;
					color: #E86A33;
					font-weight: bold;
				}
			}
		}
		.tfoot {
			border-top: 1px solid #eee;
			.row {
				display: flex;
				margin: 20rpx 0;
				.label {
					width: 200rpx;
					line-height: 40rpx;
					color: #999;
				}
				.value {
					flex: 1;
					text-align: right;
					line-height: 40rpx;
					image {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
	
	.order-detail {
		margin: 20rpx 0;
		padding: 0 20rpx 20rpx;
		border-radius: 20rpx;
		position: relative;
		background: #fff;
		.thead {
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
		.tbody {
			position: relative;
			.item {
				display: flex;
				margin: 20rpx 0;
				.label {
					width: 200rpx;
					line-height: 40rpx;
					color: #999;
				}
				.value {
					flex: 1;
					line-height: 40rpx;
					display: flex;
					align-items: center;
					color: #000;
					font-size: 28rpx;
					image {
						display: block;
						width: 30rpx;
						height: 30rpx;
						margin: 0 10rpx 0 20rpx;
					}
				}
			}
		}
	}
	
	.order-bar {
		position: relative;
		height: 120rpx;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 100;
			padding: 20rpx 0;
			background: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		}
		.bar {
			display: flex;
			align-items: center;
			.label {
				width: 60vw;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0 20rpx;
				font-size: 38rpx;
			}
			.bton {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
				background: #E86A33;
				padding: 0;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				margin: 0 20rpx;
			}
		}
	}
</style>
